<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>按键修饰符</title>
    <script src="../../utils/vue.js"></script>
</head>

<body>
    <!-- 再监听键盘事件时，需要检查详细的按键，v-on允许为键盘事件添加按键修饰符/按键码 -->
    <!-- 按键别名可参考：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values -->
    <!-- 在不同的浏览器中的key值可能不一样 -->
    <!-- 按键修饰符为按键码的别名：比如.enter,.tab,.delete,.esc,.space,.up,.down,.left,.right -->
    <!-- 可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case（短横线命名） 来作为修饰符 -->
    <div id="app">
        <p>
            键入enter时触发：
            <input v-on:keyup.enter="msg($event)">
        </p>        
        <p>
            只有按键$event.key是PageDown时才被调用
            <input v-on:keyup.page-down="msg($event)">
        </p>
        <p>
            键入enter，也可以使用keyCode：<!-- 13 is enter -->
            <input v-on:keyup.13="msg">
        </p>
        <p>
            捕获删除和退格键：<!-- .delete包括delete键和backspace键 -->
            <input v-on:keyup.delete="msg">
        </p>
        <p>
            自定义enter别名为my：
            <input v-on:keyup.my="msg">
        </p>

    </div>
    <script>
        // 可通过全局config.keyCodes.key来自定义按键修饰符别名：有些按键没有设置别名，需要自定义设置
        // 比如下面设置keycode=13（enter)键的别名为my，然后可以引用my这个自定义的修饰符
        Vue.config.keyCodes.my = 13;
        var app = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                msg: function (event) {
                    alert("按键消息：" + event.key);
                }
            }

        })
        /* document.getElementById("text").onkeypress = function (e) {
            alert("按键码: " + e.which + " 字符: " + String.fromCharCode(e.which));
        }; */
    </script>
</body>

</html>